<template>
  <!--闪购 -->
  <div>
    <h2>闪购</h2>
    <el-carousel indicator-position="outside" class="LightningDeals">
      <el-carousel-item v-for="(item,index) in 4" :key="item">
        <!--第一组数据 -->
        <div v-if="index==0">
          <el-row :gutter="20">
            <el-col :span="6" v-for="items in noedatalightningdeals" :key="items.id" class="centerdivandp">
              <img :src="items.imgsrc" />
              <div>{{items.name}}</div>
              <p>{{items.price}}</p>
            </el-col>
          </el-row>
        </div>
        <div v-if="index==1">
          <el-row :gutter="20">
            <el-col :span="6" v-for="items in towdatalightningdeals" :key="items.id" class="centerdivandp">
              <img :src="items.imgsrc" />
              <div>{{items.name}}</div>
              <p>{{items.price}}</p>
            </el-col>
          </el-row>
        </div>
        <div v-else-if="index==2">
          <el-row :gutter="20">
            <el-col :span="6" v-for="items in threedatalightningdeals" :key="items.id" class="centerdivandp">
              <img :src="items.imgsrc" />
              <div>{{items.name}}</div>
              <p>{{items.price}}</p>
            </el-col>
          </el-row>
        </div>
        <div v-else-if="index==3">
          <el-row :gutter="20">
            <el-col :span="6" v-for="items in fordatalightningdeals" :key="items.id" class="centerdivandp">
              <img :src="items.imgsrc" />
              <div>{{items.name}}</div>
              <p>{{items.price}}</p>
            </el-col>
          </el-row>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="banner">
      <img :src="bannerimgpath"/>
    </div>



  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerimgpath:require("@/assets/img/406c0feca62732acbb2893344486895d.webp"),
      //闪购产品
      noedatalightningdeals: [
        {
          id: 1,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i1/TB1R2XZFVXXXXbOXXXXXXXXXXXX_!!0-item_pic.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 2,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i1/TB1R2XZFVXXXXbOXXXXXXXXXXXX_!!0-item_pic.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 3,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i1/TB1R2XZFVXXXXbOXXXXXXXXXXXX_!!0-item_pic.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 4,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i1/O1CN01M8ZtyA1o9rNrr66cB_!!2201641345183.jpg",
          price: 19.66,
          name: "毛巾"
        }
      ],
      towdatalightningdeals: [
        {
          id: 1,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01ger6hY23YKmvW6SGG_!!2206850467267.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 2,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01ger6hY23YKmvW6SGG_!!2206850467267.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 3,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01ger6hY23YKmvW6SGG_!!2206850467267.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 4,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01ger6hY23YKmvW6SGG_!!2206850467267.jpg",
          price: 19.66,
          name: "毛巾"
        }
      ],
      threedatalightningdeals: [
        {
          id: 1,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01SXX8lT1ILFWWI44NI_!!2952900876.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 2,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01SXX8lT1ILFWWI44NI_!!2952900876.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 3,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01SXX8lT1ILFWWI44NI_!!2952900876.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 4,
          imgsrc:
            "http://img.alicdn.com/bao/uploaded/i2/O1CN01SXX8lT1ILFWWI44NI_!!2952900876.jpg",
          price: 19.66,
          name: "毛巾"
        }
      ],
      fordatalightningdeals: [
        {
          id: 1,
          imgsrc:
            "https://img.alicdn.com/imgextra/i3/865760290/TB1YDv6iLNNTKJjSspfXXbXIFXa_!!0-item_pic.jpg_430x430q90.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 2,
          imgsrc:
            "https://img.alicdn.com/imgextra/i3/865760290/TB1YDv6iLNNTKJjSspfXXbXIFXa_!!0-item_pic.jpg_430x430q90.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 3,
          imgsrc:
            "https://img.alicdn.com/imgextra/i3/865760290/TB1YDv6iLNNTKJjSspfXXbXIFXa_!!0-item_pic.jpg_430x430q90.jpg",
          price: 19.66,
          name: "毛巾"
        },
        {
          id: 4,
          imgsrc:
            "https://img.alicdn.com/imgextra/i3/865760290/TB1YDv6iLNNTKJjSspfXXbXIFXa_!!0-item_pic.jpg_430x430q90.jpg",
          price: 19.66,
          name: "毛巾"
        }
      ]
    };
  }
};
</script>
<style scoped>
img {
  width: 100%;
  height: 230px;
}
h2{
  margin: 0;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
}
.centerdivandp div,p{
    text-align: center;
}
.centerdivandp p{
  color: sandybrown;
}
/* 镖符 */
.banner{
  width: 1226px;
  height: 120px;
}
.banner img{
  width: 100%;
  height: 100%;
}
</style>